<template>
  <PageWrapper :class="prefixCls" title="正在抢单">
    <template #headerContent>
      <a-row :gutter="16">
        <a-col :span="20">
          <BasicForm @register="registerForm" @submit="handleSubmit" @reset="loadData({})" />
        </a-col>
        <a-col :span="3">
          <Tag color="red" title="订单总数">{{ count?.allTotal || 0 }}</Tag>
          <Tag color="red" title="订单总额">{{ count?.allTotalAmount || 0 }}</Tag>
          <Tag color="red" title="成功总数">{{ count?.allSuccessTotal || 0 }}</Tag>
          <Tag color="red" title="成功总额">{{ count?.allSuccessTotalAmount || 0 }}</Tag>
        </a-col>
      </a-row>
    </template>

    <div :class="`${prefixCls}__content`">
      <a-list>
        <a-row :gutter="8">
          <template v-for="item in info.list" :key="item.title">
            <a-col :span="7">
              <a-list-item style="padding: 2px 0">
                <OrderCard
                  @on-checked="openModal(true, { info: item, report: false, reload: loadData })"
                  :order="item"
                />
              </a-list-item>
            </a-col>
          </template>
          <div style="display: flex; justify-content: center; width: 100%">
            <a-empty v-if="info.total < 1" />
          </div>
        </a-row>
        <a-row :gutter="8" justify="end">
          <a-col :span="4">
            <a-pagination
              v-model:current="page"
              v-model:pageSize="pageSize"
              show-size-changer
              :total="info.total"
            />
          </a-col>
        </a-row>
      </a-list>
    </div>
    <ReportModal @register="register" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue';
  import { GetOrderApi, GetPaymentApi, GetPaymentCountApi } from '@/api/payment';
  import { PageWrapper } from '@/components/Page';
  import { Tag } from '@/components/InfoTag';
  import OrderCard from './components/OrderCard.vue';
  import { ReportModal } from './modal';
  import { useModal } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';

  const prefixCls = 'list-card';
  const page = ref(1);
  const pageSize = ref(10);
  const info = ref({});
  const count = ref({});
  const refresh = ref(30);

  const [register, { openModal }] = useModal();
  const [registerForm, { getFieldsValue }] = useForm({
    labelWidth: 100,
    schemas: [
      {
        field: 'orderNo',
        label: '系统单号',
        component: 'Input',
        colProps: {
          span: 6,
        },
      },
      {
        field: 'outTradeNo',
        label: '商户单号',
        component: 'Input',
        colProps: {
          span: 6,
        },
      },
      {
        field: 'payName',
        label: '收款账号',
        component: 'Input',
        colProps: {
          span: 6,
        },
      },
      {
        field: 'payAccount',
        label: '收款姓名',
        component: 'Input',
        colProps: {
          span: 6,
        },
      },
      {
        field: 'code',
        label: '通道类型',
        component: 'ApiSelect',
        colProps: {
          span: 6,
        },
        componentProps: {
          api: GetPaymentApi,
          resultField: 'list',
          labelField: 'title',
          valueField: 'code',
        },
      },
      {
        field: 'refresh',
        label: '页面刷新时间',
        component: 'Select',
        colProps: {
          span: 6,
        },
        componentProps: {
          defaultValue: Number(localStorage.getItem('refresh')) || 30,
          options: [
            {
              label: '10秒',
              value: 10,
            },
            {
              label: '30秒',
              value: 30,
            },
            {
              label: '1分钟',
              value: 60,
            },
            {
              label: '5分钟',
              value: 300,
            },
          ],
          onChange: (value) => {
            refresh.value = value;
            refreshFunc();
          },
        },
      },
    ],
  });
  watch(
    () => refresh.value,
    () => {
      localStorage.setItem('refresh', refresh.value);
    },
  );
  const loadData = (params) => {
    if (params) {
      GetOrderApi({ page: page.value, pageSize: pageSize.value, ...params }).then((res) => {
        info.value = res;
      });
    } else {
      GetOrderApi({ page: page.value, pageSize: pageSize.value }).then((res) => {
        info.value = res;
      });
    }

    GetPaymentCountApi().then((res) => {
      count.value = res;
    });
  };
  const handleSubmit = () => {
    const params = getFieldsValue();
    loadData(params);
  };

  const refreshFunc = () => {
    handleSubmit();
    setTimeout(refreshFunc, refresh.value * 1000);
  };

  onMounted(async () => {
    loadData({});
    setTimeout(refreshFunc, refresh.value * 1000);
  });
</script>
<style lang="less" scoped>
  .list-card {
    &__link {
      margin-top: 10px;
      font-size: 14px;

      a {
        margin-right: 30px;
      }

      span {
        margin-left: 5px;
      }
    }

    &__card {
      width: 100%;
      margin-bottom: -8px;
      font-weight: bold;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        color: @text-color-base;
        font-size: 16px;
        font-weight: 500;

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
      }

      &-detail {
        padding-top: 10px;
        padding-left: 30px;
        color: @text-color-secondary;
        font-size: 14px;
      }
    }
  }

  .subtitle {
    color: rgb(150 150 150);
    font-weight: 400;
  }
</style>
